<template>
  <div class="autumn-container">
    <!-- 面包 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/dashboard' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>监听列表</el-breadcrumb-item>
    </el-breadcrumb>

    <div class="autumn-center">
      <!-- 搜索栏 -->
      <div class="query-form">
        <autumn-search :modelValue="queryInfo" @search="search">
          <template #default>
            <el-form-item prop="name" label="名称">
              <el-input v-model="queryInfo.name" />
            </el-form-item>
            <el-form-item prop="type" label="类型">
              <el-select v-model="queryInfo.type" placeholder="请选择">
                <el-option label="执行监听器" value="1" />
                <el-option label="任务监听器" value="2" />
              </el-select>
            </el-form-item>
            <el-form-item prop="event" label="事件">
              <el-select v-model="queryInfo.event" placeholder="请选择">
                <el-option v-for="(value, key) in eventType" :key="key" :label="value" :value="key" />
              </el-select>
            </el-form-item>
          </template>
        </autumn-search>
      </div>

      <!-- 数据表格 -->
      <div class="main-body top">
        <autumn-table ref="mainTableRef" :page="page" @changePage="changePage">
          <template #button>
            <el-button type="primary" icon="el-icon-plus" v-if="$hasPermission('flow:flowListener:add')"
              @click="toView">新增</el-button>
          </template>
          <template #column>
            <el-table-column type="index" label="#" fixed="left" align="center">
              <template #default="scope">
                {{ initIndex(scope.$index) }}
              </template>
            </el-table-column>
            <el-table-column prop="name" label="名称" />
            <el-table-column label="类型" align="center" width="100">
              <template #default="scope">
                {{ scope.row.type == '1' ? '执行监听' : '任务监听' }}
              </template>
            </el-table-column>
            <el-table-column label="事件" align="center" width="80"
              :formatter="(row: any) => getEventType(row.type, row.event)" />
            <el-table-column label="值类型" align="center" width="100"
              :formatter="(row: any) => valueTypes[row.valueType]" />
            <el-table-column prop="value" label="值" />
            <el-table-column label="启用" align="center" width="100">
              <template #default="scope">
                <el-switch v-model="scope.row.isEnable" :active-value="1" :inactive-value="0"
                  :disabled="!$hasPermission('flow:flowListener:enable&flow:flowListener:disable')"
                  @change="changeEnabled(scope.row)" />
              </template>
            </el-table-column>
            <el-table-column prop="remark" label="备注" />
            <el-table-column label="操作" fixed="right" align="center" width="160">
              <template #default="scope">
                <el-button-group>
                  <el-button type="info" icon="el-icon-view" size="small" title="查看" @click="toView(scope.row, '1')" />
                  <el-button type="primary" icon="el-icon-edit" size="small" title="编辑"
                    v-if="$hasPermission('flow:flowListener:update')" @click="toView(scope.row)" />
                  <el-button type="danger" icon="el-icon-delete" size="small" title="删除"
                    v-if="$hasPermission('flow:flowListener:delete')" @click="del(scope.row)" />
                </el-button-group>
              </template>
            </el-table-column>
          </template>
        </autumn-table>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, watch } from 'vue'
import { useRouter } from 'vue-router'
import { pageListener, enableListener, disableListener, deleteListener } from 'src/api/flow/listener'
import useTable from 'src/hooks/useTable'
import { $hasPermission, $confirmMsg } from 'src/hooks/useCommon'
import { eventTypes, valueTypes } from './type'

const { page, initIndex } = useTable()

// 分页查询
const queryInfo = reactive({
  name: '',
  type: '',
  event: ''
})
const changePage = function (pageNumber: number, pageSize: number) {
  page.pageNumber = pageNumber
  page.pageSize = pageSize
  pageListener({ ...queryInfo, pageNumber, pageSize }).then(({ data }) => {
    page.data = data.list
    page.total = data.total
  })
}
const search = function () {
  changePage(1, 10)
}
search()

// 监听
const eventType = ref({ ...eventTypes['1'] })
watch(() => queryInfo.type, (newVal) => {
  eventType.value = { ...eventTypes[newVal] }
})

// 根据监听类型获取事件
const getEventType = (type: string, value: string): string => {
  const types: any = { ...eventTypes[type] }
  return types[value]
}

// 启/禁用
const changeEnabled = function (row: any) {
  const id = row.id
  const isEnable = row.isEnable
  if (isEnable) {
    enableListener(id).then(() => {
      search()
    })
  } else {
    disableListener(id).then(() => {
      search()
    })
  }
}

// 删除
const del = function (row: any) {
  const ids = [row.id]
  $confirmMsg('确认删除吗？', () => {
    deleteListener(ids).then(() => {
      search()
    })
  })
}

// 查看
const router = useRouter()
const toView = (row: any, type?: string) => {
  const id = row.id
  router.push({
    path: type ? '/flow/listener/listenerView' : '/flow/listener/listenerForm',
    query: { id }
  })
}
</script>

<style lang="scss" scoped>
</style>
